<template>
  <div class="audition266">
    <p>react16 中废弃的三个钩子</p>
    <code class="code">
      <span class="color">componentWillMount</span>  // 组件将要挂载的钩子<br />
      <span class="color1">componentWillReceiveProps</span> // 组件将要接收一个新的参数时的钩子<br />
      <span class="color2">componentWillUpdate</span>  // 组件将要更新的钩子
    </code>
    <p>
      <br>
    </p>
    <p>新增的2个钩子</p>
    <code class="code">
      <span class="color3">static</span> <span class="color4">getDerivedStateFromProps</span>  // 静态方法
    </code>
    <p>getDerivedStateFromProps 会在调用 render 方法之前调用，即在渲染 DOM 元素之前会调用，并且在初始挂载及后续更新时都会被调用。</p>
    <p>state 的值在任何时候都取决于 props。</p>
    <p>getDerivedStateFromProps 的存在只有一个目的：让组件在 props 变化时更新 state。</p>
    <p>该方法返回一个对象用于更新 state，如果返回 null 则不更新任何内容。</p>
    <p>
      <a href="https://www.runoob.com/react/react-ref-getderivedstatefromprops.html" target="_blank">用法示例</a>
    </p>
    <br>
    <code class="code">
      <span class="color5">getSnapshotBeforeUpdate</span>
    </code>
    <p>getSnapshotBeforeUpdate() 方法在最近一次渲染输出（提交到 DOM 节点）之前调用。</p>
    <p>在 getSnapshotBeforeUpdate() 方法中，我们可以访问更新前的 props 和 state。</p>
    <p>getSnapshotBeforeUpdate() 方法需要与 componentDidUpdate() 方法一起使用，否则会出现错误。</p>
    <p><a href="https://www.runoob.com/react/react-ref-getsnapshotbeforeupdate.html" target="_blank">用法示例</a></p>
    <hr>
    <p>
      在16.8版本以后，react将diff运算改进为Fiber，这样的话当我们调用setState方法进行更新的时候，<br/>在reconciler 层中js运算会按照节点为单位拆分成一个个小的工作单元，在render前可能会中断或恢复，就有可能导致在render前这些生命周期在进行一次更新时存在多次执行的情况，<br/>此时如果我们在里面使用ref操作dom的话，就会造成页面频繁重绘，影响性能。<br/>
        所以废弃了这几个will系列的勾子，增加了 getDerivedStateFromProps这个静态方法，这样的话我们就不能在其中使用this.refs以及this上的方法了；<br/>getSnapshotBeforeUpdate 这个方法已经到了commit阶段，只会执行一次，给想读取 dom 的用户一些空间。
    </p>
  </div>
</template>

<script>
export default {
  name: 'Audition266'
}
</script>

<style>

</style>